<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Devices</title>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='control_style.css') }}"/>
    <script src="{{ url_for('static', filename='jquery-1.10.2.js') }}"></script>
</head>
<body>
<div id="" class="left full-height">
    <!-- logo -->
    <div id="" class="logo-bar">
        <div id="" class="ele full-height">
            <h1 style="color: #ededed;">LOGO</h1>
        </div>

    </div>
    <!-- tabs -->
    <div id="" class="tab-bar">
        <div style="height: 50px;width: 100%"></div>
        <a href="/devices">
            <div id="" class="tab-content no-choix">
                DEVICES
            </div>
        </a>
        <a href="/types">
            <div id="" class="tab-content no-choix">
                TYPE
            </div>
        </a>
        <a href="/conn">
            <div id="" class="tab-content no-choix">
                CONNECTIONS
            </div>
        </a>
        <a href="/log">
            <div id="" class="tab-content choix">
                LOG
            </div>
        </a>
        <a href="/groups">
            <div id="" class="tab-content no-choix">
                GROUPS
            </div>
        </a>
    </div>
</div>

<div id="" class="right full-height">
    <!-- admin -->
    <div id="" class="admin-bar">

    </div>
    <!-- main content -->
    <div id="" class="content-background">
        <div class="content-box">
            <div id="" class="content-control-box">
                <input id="search-text" class="input_style"/>
                <button onclick="search_log()" class="btn">SEARCH</button>
            </div>
            <div id="" class="data-box" style="overflow-y: auto">
                <table id="table-log" class="table_style" cellspacing=0>
                    <tr>
                        <th>id</th>
                        {#                <th>task_id</th>#}
                        {#                <th>sender_id</th>#}
                        <th>sender</th>
                        <th>interface</th>
                        {#                <th>receiver_id</th>#}
                        <th>receiver</th>
                        <th>status_code</th>
                        <th>describe</th>
                        <th>time</th>
                    </tr>

                    {% for execution_log in execution_logs %}
                        <tr>
                            <td>{{ execution_log[0] }}</td>
                            {#                    <td>{{ execution_log[1] }}</td>#}
                            {#                    <td>{{ execution_log[2] }}</td>#}
                            <td>{{ execution_log[3] }}</td>
                            <td>{{ execution_log[4] }}</td>
                            {#                    <td>{{ execution_log[5] }}</td>#}
                            <td>{{ execution_log[6] }}</td>
                            <td>{{ execution_log[7] }}</td>
                            <td>{{ execution_log[8] }}</td>
                            <td>{{ execution_log[9] }}</td>
                        </tr>
                    {% endfor %}

                </table>

            </div>
        </div>
    </div>
</div>
</body>
<script>
    function jump(url) {
        window.location.href = url;
    }

    function create_xhr() {
        let XHR = [  //兼容不同浏览器和版本得创建函数数组
            function () {
                return new XMLHttpRequest()
            },
            function () {
                return new ActiveXObject("Msxml2.XMLHTTP")
            },
            function () {
                return new ActiveXObject("Msxml3.XMLHTTP")
            },
            function () {
                return new ActiveXObject("Microsoft.XMLHTTP")
            }
        ];
        let xhr = null;
        //尝试调用函数，如果成功则返回XMLHttpRequest对象，否则继续尝试
        for (let i = 0; i < XHR.length; i++) {
            try {
                xhr = XHR[i]();
            } catch (e) {
                continue  //如果发生异常，则继续下一个函数调用
            }
            break;  //如果成功，则中止循环
        }
        return xhr;  //返回对象实例
    }

    function search_log() {
        let search_input = document.getElementById("search-text")
        let search_text = search_input.value

        let search_data = {
            "search_text": search_text
        };

        $.ajax({
            type: "POST",
            url: "/searchLog",
            'data': JSON.stringify(search_data),
            dataType: "json",
            'processData': false,
            'contentType': 'application/json',
            success: function (data) {
                console.log(data)
                if (data == null || data == '') {
                    alert("数据错误")
                } else {
                    let str = "<tr>\n" +
                        "<th>id</th>\n" +
                        "<th>sender</th>\n" +
                        "<th>interface</th>\n" +
                        "<th>receiver</th>\n" +
                        "<th>status_code</th>\n" +
                        "<th>describe</th>\n" +
                        "<th>time</th>\n" +
                        "</tr>";
                    for (let i = 0; i < data.show_executionLog_paging.length; i++) {
                        str += "<tr><td>" + data.show_executionLog_paging[i][0] +
                            "</td><td>" + data.show_executionLog_paging[i][3] +
                            "</td><td>" + data.show_executionLog_paging[i][4] +
                            "</td><td>" + data.show_executionLog_paging[i][6] +
                            "</td><td>" + data.show_executionLog_paging[i][7] +
                            "</td><td>" + data.show_executionLog_paging[i][8] +
                            "</td><td>" + data.show_executionLog_paging[i][9] + "</td></tr>";
                    }
                    $("#table-log").html(str);
                }
            }
        });
        console.log(search_text)
    }
</script>
</html>